<style lang="sass" scoped>
    @import '../../assets/common/css/vars.scss';
    .status-crowd{
        background:$crowd;
    }
    .status-busy{
        background:$busy;
    }
    .status-free{
        background:$free;
    }
    .status-maintain{
        background:$maintain;
    }
    .com-block{
        background: #fff;
        padding:15px;
        margin-top:20px;
        .com-content{
            .com-title{
                margin-bottom: 10px;
                .title-text{
                    float:left;
                    font-size: 20px;
                    width: 150px;
                }
                .server-status{
                    padding-left:150px;
                    text-align: right;
                    min-width: 550px;
                    .status-block{
                        display: inline-block;
                        width: 50px;
                        height: 30px;
                        vertical-align: middle;
                    }
                }
            }
            .server-list{
                min-width: 450px;
                border:1px solid #585858;
                height: 70px;
                line-height: 70px;
                margin:10px 20px 0;
                padding-left:10px;
                .server-status{
                    height: 100%;
                    width: 50px;
                    float: right;
                    display: block;
                }
                p{
                    line-height: 30px;
                }
            }
        }
    }
</style>

<template>
<div class="container-fluid">
    <div class="comm_content_top clearfix">
        <nav-bar>
            <li slot="nav_two">服务器管理</li>
        </nav-bar>
    </div>
    <div class="com-block">
        <div class="com-content clearfix">
            <div class="com-title clearfix">
                <span class="title-text">总控服务器：</span>
                <div class="server-status">
                    <span class="inline_block mr10">
                        <span class="status-block status-crowd"></span>
                        <span class="inline_block">拥挤</span>
                    </span>
                    <span class="inline_block mr10">
                        <span class="status-block status-busy"></span>
                        <span class="inline_block">繁忙</span>
                    </span>
                    <span class="inline_block mr10">
                        <span class="status-block status-free"></span>
                        <span class="inline_block">空闲</span>
                    </span>
                    <span class="inline_block mr10">
                        <span class="status-block status-maintain"></span>
                        <span class="inline_block">维护</span>
                    </span>
                </div>
            </div>
            <div class="server-list clearfix">
                <span class="float-left mr20">IP：{{dataInfo.ip}}</span>
                <span class="float-left">端口：{{dataInfo.port}}</span>
                <span
                    :class="{'status-crowd':dataInfo.serverStatus=='crowd','status-busy':dataInfo.serverStatus=='busy','status-free':dataInfo.serverStatus=='free','status-maintain':dataInfo.serverStatus=='maintain'}" 
                    class="server-status"></span>
                <span class="float-right mr10">注册人数：{{dataInfo.peopleNumer}}</span>
            </div>
        </div>
        <div class="com-content clearfix mt20">
            <div class="com-title clearfix">
                <span class="title-text">在线服务器：</span>
            </div>
            <div v-for="(item,i) in onlineServer" class="server-list clearfix">
                <router-link
                    :to="{name:'server_detail',query:{ip:item.ip}}" 
                    class="float-left mr20">IP：{{item.ip}}</router-link>
                <span class="float-left">端口：{{item.port}}</span>
                <span
                    :class="{'status-crowd':item.serverStatus=='crowd','status-busy':item.serverStatus=='busy','status-free':item.serverStatus=='free','status-maintain':item.serverStatus=='maintain'}" 
                    class="server-status"></span>
                <span class="float-right mr10">
                    <p>在线人数：{{item.peopleNumer}}</p>
                    <p>ping：{{item.ping}}</p>
                </span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    import page from 'components/page'
    import navBar from 'components/navBar'
    export default {
        components: {
           page,
           navBar,
        },
        data(){
            return {
                dataInfo:{},
                onlineServer:[],
            }
        },
        watch:{
            
        },
        created(){
            this.getInfo();
        },
        mounted() {
            this.$nextTick(()=>{
                
            })
        },
        methods:{
            getInfo(){
                util.ajax({
                    url:config.baseApi + 'game-manage/api/server/getServerInfo',
                    success:(data=>{
                        this.dataInfo = data.data.projectControlServer;
                        this.onlineServer = data.data.onlineServer;
                    })
                })
            },
        }
    }
</script>
